<template>
	<view style="background:#ededed;height:auto">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<!-- <block slot="content">聊天</block> -->
			<block slot="content">{{yourName}}（{{yourMemberid}}）</block>
		</cu-custom>
        <view class='back' @click="back"></view>
		<view @click="goDetail()" class="go">...</view>
		<!-- 聊天记录盒子 -->
		<view class="cu-chat">
			<view class="cu-item " :class="item.person.isMe?'self':''" v-for="(item,index) in chatInfoList" :key="index">
				<view class="main" v-if="item.person.isMe == true">
					<view class="content bg-green shadow">
						<template v-if="item.body.type == 1">
							<text>{{item.body.content}}</text>
						</template>
						<template v-if="item.body.type == 2">
							<view class="main-card-wrap">
								<text>{{item.body.content.title}}</text>
								<img src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" alt="">
							</view>
						</template>
					</view>
				</view>
				<view v-if="item.person.isMe == true" class="cu-avatar radius" >
                    <img :src="item.person.avatarurl!= ''?a_url + item.person.avatarurl:avatar" alt="" style="width:40px;height:40px">
                </view>
				<view v-if="item.person.isMe == true" class="date">{{item.head.dateTime}}</view>
				<view v-if="item.person.isMe == false" class="cu-avatar radius">
                    <img :src="item.person.avatarurl != ''?a_url + item.person.avatarurl:avatar" alt="" style="width:40px;height:40px">
                </view>
				<view v-if="item.person.isMe == false" class="main">
					<view class="content bg-green shadow">
						<template v-if="item.body.type == 1">
							<text>{{item.body.content}}</text>
						</template>
						<template v-if="item.body.type == 2">
							<view class="main-card-wrap">
								<text>{{item.body.content.title}}</text>
								<!-- <img src="item.body.content.pic" alt=""> -->
								<img src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" alt="">
							</view>
						</template>
					</view>
				</view>
				<view v-if="item.person.isMe == false" class="date">{{item.head.dateTime}}</view>
			</view>
		</view>
		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10" v-model='inputContent'></input>
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click="sub">发送</button>
		</view>
	</view>
</template>

<script>
import config from "../../API/config.js";
import axios from "axios";
export default {
	data () {
		return {
			p:1,
			chatInfoList:[],									//聊天记录
			InputBottom: 0,
			url: "ws://v3-e.xgwl.net.cn:2345/",
			params: {
				key: "",
				loginKey: "",
				token: "",
				sertype: 0,
				isForceLogin: null,
			},
			inputContent: "",
			dialogueKey: "",
            userData:[],
            a_url:'http://v3-a.xgwl.net.cn',
            avatar:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
            yourName:'',
            yourMemberid:''									
		};
	},
	methods: {
		goDetail(){
			uni.redirectTo({
				url: `./detail?id=` + this.$route.query.id
			})
		},
		back() {
            uni.switchTab({
                url: "./verticalnav"
            });
            // window.location.reload()
		},
		sub() {
            if(this.inputContent != ''){
                const data = {
                    talk_id: this.$route.query.id,
                    content: this.inputContent,
                    type: 1,
                };
                this.$Socket.action("sendTalkMsg", data,()=>{},()=>{});
                this.$nextTick(function () {
                    this.scrollTop()
                });
                this.inputContent = ''
            }
            
		},
		openData () {
            // this.getTalkDetail()
            this.getChat()
			let newChatAlert = (data) =>{
                    console.log('chat页第一回调',data);
                if (data.head.fromMemberId != this.userData.member_id) {
                    console.log('data新消息',data);
                }
                this.getChat()
                this.scrollTop()
            }
			let listRefresh = (data) =>{
                console.log('chat页第2回调',data);
                if(data!=undefined){
                    this.$store.commit('setGetTalkList',data)
                    console.log('chat页',this.$store.state.getTalkList)
                }
			}
			let talkDetailRefresh = (data) =>{
               console.log('chat页第3回调',data);
            }
            let talkWithMsg = (msg) => {
                console.log('chat页第4回调',msg);
                this.chatInfoList.push(msg)
                this.$store.commit('setGetChat',this.chatInfoList)
                this.scrollTop()
            }
			this.$Socket.action("addTalkObjectCallback", {
                onNewChatAlert:newChatAlert,
                onListRefresh:listRefresh,
                onTalkDetailRefresh:talkDetailRefresh,
                onTalkWithMsg:talkWithMsg,
            },()=>{},()=>{});
        },
        scrollTop(){
            setTimeout(()=>{
                uni.pageScrollTo({
                    scrollTop: 99999999999,
                    duration: 10
                })
           },0) 
        },
        getChat(){
            this.$Socket.action('getChat',{talk_id:this.$route.query.id},(res)=>{
                console.log(res.data.length,'chat',res)
                if(res != undefined && res.code == 200 && res.data.length != 0){
                this.chatInfoList = res.data
                this.$store.commit('setGetChat',res.data)
            }
            },()=>{})
        },
        getTalkDetail(){
            this.$Socket.action('getTalkDetail',{talk_id:this.$route.query.id},(res)=>{
                if(res != undefined && res.code == 200){
                this.yourName = res.data[0].name
                this.yourMemberid = res.data[0].member_id
            }
            },()=>{})
        },
        // getTalkList(){
        //     this.$Socket.action('getTalkList',null,(res)=>{
        //         if(res != undefined && res.code == 200){
        //             return res.data
        //         }
        //     },()=>{})
        // }
    },
	onLoad() {
        this.getChat()
        if(this.$store.state.getChat){
            this.chatInfoList = this.$store.state.getChat
            console.log(this.chatInfoList)
        }
        this.openData()
        this.getTalkDetail()
        this.userData = JSON.parse(sessionStorage.getItem('userData'))
	},

	onPullDownRefresh() {
		
	},
	onReachBottom(){
		
    }
};
</script>

<style scoped lang='less'>
    .back{
        background-color: transparent;
        width: 62px;
        height: 45px;
        position: fixed;
        top: 0px;
        z-index: 9999;
    }
	.main{
		word-break: break-all;
		white-space: normal;
	}
	.go{
		width: 80rpx;
		height: 80rpx;
		z-index: 9999;
		position: fixed;
		right: -24rpx;
		top: -12rpx;
		font-size: 64rpx;
		color:#ffffff;
	}
	page {
		padding-bottom: 100rpx;
	}
	.cu-chat{
		background-color: #ffffff;
	}
	.main-card-wrap{
		display:flex;
		flex-direction: column;
		flex-wrap: wrap;
		/* background: #fff; */
		box-sizing: border-box;
		border-radius: 5rpx;
		padding:5rpx 10rpx;	
		img{
			width: 160rpx;
			height:160rpx;
			padding:5rpx 0;
		}
		text{
			color:#FFFFFF;
			font-size:26rpx;
			font-weight:100;
		}
	}
</style>
